<template>
	<view class="item m-b-15" @click="activityClick(data.actID)">
		<view class="item-title">
			<text v-if="data.actStatus == 1" style="color: #fcc747;">未开始</text>
			<text v-if="data.actStatus == 2" style="color: #DD524D;">进行中</text>
			<text v-if="data.actStatus == 3" style="color: #999;">已结束</text>
			<text>#</text>
			<text v-text="data.actTitle"></text>
		</view>
		<view class="item-image">
			<image class="item-br" :src="data.filesPath" />
		</view>
		<view class="item-desc">
			<view class="item-time">
				<image class="icon" src="../../../static/images/timg.png"></image>
				<text>{{actStartTime}} — {{actEndTime}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'activity-item',
		props: {
			data: Object
		},
		computed: {
			actStartTime() {
				return this.dateFormat(this.data.actStartTime)
			},

			actEndTime() {
				return this.dateFormat(this.data.actEndTime)
			}
		},
		methods: {
			dateFormat(value) {
				var list = value.split(" ")
				var _list = list[0].split("-")
				return _list[1] + '月' + _list[2] + '日' + " " + list[1]
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../common/scss/_common.scss';

	.item {
		border-radius: ws(5);
		box-shadow: $shaow-main;
		overflow: hidden;
		position: relative;
		background-color: #fff;
		padding: ws(15);


		.item-image {
			width: ws(200);
			height: ws(200);
			overflow: hidden;
			background-color: #eee;
			.item-br {
				width: ws(200);
				height: ws(200);
				object-fit: cover;
			}
		}

		.item-title {
			font-size: ws(16);
			font-weight: bold;
			color: #333;
			width: ws(300);
			margin-bottom: ws(10);
			@include one-line;
		}

		.item-desc {
			margin-top: ws(15);
			background-color: #fff;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.item-time {
				line-height: ws(12);
				font-size: ws(14);
				color: #7F7F7F;
				display: flex;
				align-items: center;

				.icon {
					width: ws(12);
					height: ws(12);
					margin-right: ws(4);
				}
			}
		}
	}
</style>
